<!DOCTYPE html>
<html lang="en">
<head>
<title>Matrix Admin</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../js/layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="../js/handsontable/handsontable.full.min.css">
    <link rel="stylesheet" type="text/css" href="../js/handsontable/main.css">
    <script src="../js/handsontable/handsontable.full.min.js"></script>
    <script src="../js/handsontable/jquery.min.js"></script>
    <script src="../js/handsontable/xlsx.full.min.js"></script>
    <script src="../js/layui/layui.js" charset="utf-8"></script>
   <!-- <script src="../js/resultsDisplay.js" ></script>-->
    <style type="text/css">
        .layui-badge-dot {
            width: 18px;
            height: 18px;

        }
        .layui-form-label {
            line-height: 30px;
            padding:0px;
        }
        .layui-form-select .layui-input {
            height: 30px;
        }
        .layui-inline {
            height: 30px;
            line-height: 30px;
        }
    </style>
</head>
<body>

<div id="content" >

    <div style="padding: 20px; background-color: #F2F2F2;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">参数列表</div>
                        <!--table-->
                        <table class="layui-hide" id="test" lay-filter="test"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
 </div>

<!--js-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="toAdd"><i class="layui-icon">&#xe654;</i>添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="toEdit"><i class="layui-icon">&#xe642;</i>修改</button>
        <button class="layui-btn layui-btn-sm" lay-event="toDelete"><i class="layui-icon">&#xe640;</i>删除</button>
    </div>
</script>

<script type="text/html" id="status">
    <span class="layui-badge-dot"></span>
</script>


<script>
    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#test',
            toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            , title: '参数数据表'
            ,page: true
            , cols: [[
                  { type: 'checkbox' }
                , { field: 'num', title: '序号', width: 65, align: 'center' }
                , { field: 'paramName', title: '参数名', width: '20%', sort: false }
                , { field: 'paramType', title: '参数类型', width: '20%', edit: 'text' }
                , { field: 'desc', title: '描述说明', width: 'auto',}
                , { field: 'createTime', title: '创建时间', width: '40px', }
                , { field: 'updateTime', title: '修改时间', width: '40px', }
            ]]
            , data: [
                { num: "1", paramName: "username",
                    paramType: "String",
                    desc: "用户名",
                    createTime:"2020-01-01",
                    updateTime:"2020-01-02"
                },
                { num: "2", paramName: "password",
                    paramType: "String",
                    desc: "密码",
                    createTime:"2020-01-01",
                    updateTime:"2020-01-02"
                },
                { num: "3", paramName: "age",
                    paramType: "String",
                    desc: "年龄",
                    createTime:"2020-01-01",
                    updateTime:"2020-01-02"
                },

            ]
            //,page: true
        });
        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'toAdd':
                    var data = checkStatus.data;
                    //layer.alert(JSON.stringify(data));
                    layer.open({
                        title: '添加',
                        shade: 0,
                        type: 2
                        ,id: 'layerDemo'+obj.config.id //防止重复弹出
                        , area: ['400px', '200px']
                        ,content: 'params_edit.html'
                        ,btn: ['保存', '取消']
                        ,btnAlign: 'c' //按钮居中
                        ,shade: 0 //不显示遮罩
                        ,btn2: function(){
                            layer.closeAll();
                        }
                    });

                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选');
                    break;
                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });
        //监听行工具事件
        table.on('tool(test)', function (obj) {
            // var index = layer.load(1, {
            //   shade: [0.5, '#000'] //0.1透明度的背景
            // });
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'refresh') {
                console.log("强制通过")
            } else if (obj.event === 'show') {
                //layer.close(index);
                console.log(data)
                alert("打开excel预览")
                hot.loadData(dataObject1);
                console.log("show配置文件信息")
            }
        });
    });

    function toCodeView(){
        layer.open({
            title: '查看代码',
            shade: 0,
            type: 1
            ,id: '111' //防止重复弹出
            , area: ['800px', '550px']
            ,content: '<pre style="padding:5px;">package com.fr.function;\n' +
                'import com.fr.script.AbstractFunction;\n' +
                'import java.net.InetAddress;\n' +
                'public class GETIP extends AbstractFunction {\n' +
                '    @Override\n' +
                '    public Object run(Object[] objects) {\n' +
                '        try {\n' +
                '            InetAddress ia = InetAddress.getLocalHost();\n' +
                '            return ia.getHostAddress();\n' +
                '        } catch (Exception e) {\n' +
                '            return e.getMessage();\n' +
                '        }\n' +
                '    }\n' +
                '    public static InetAddress getInetAddress() {\n' +
                '        return null;\n' +
                '    }\n' +
                '}</pre>'
            ,btn: '关闭全部'
            ,btnAlign: 'c' //按钮居中
            ,shade: 0 //不显示遮罩
            ,yes: function(){
                layer.closeAll();
            }
        });
    }
    function toParamsView(){
        layer.open({
            title: '查看代码',
            shade: 0,
            type: 2
            ,id: '111' //防止重复弹出
            , area: ['800px', '550px']
            ,content: 'params_List.html'
            ,btn: '关闭全部'
            ,btnAlign: 'c' //按钮居中
            ,shade: 0 //不显示遮罩
            ,yes: function(){
                layer.closeAll();
            }
        });
    }

</script>

</body>
</html>
